<template>
  <div>
    <div v-if="empty" class="login-fail">
      <img class="icon" src="../../assets/icon/icon_zhanghao@2x.png" alt/>
      <div class="msg">{{ errorMsg }}</div>
    </div>
    <div v-else class="page-main">
      <div class="manager-name">
        {{ bizName }}管理员您好：
      </div>
      <div class="mt5">
        用户<span class="user-name"> {{ userName }}</span>正在管理后台
      </div>
      <div class="action-description mt5">
        {{ description[sceneStr] }},
      </div>
      <div class="mt5">
        请确认是否授权其完成操作。
      </div>
      <div class="btn-List flex-x-center">
        <van-button
          type="primary"
          text="授权一次"
          class="pra-btn"
          @click="confirm()"
        />
        <van-button
          type="danger"
          plain
          text="拒绝"
          @click="confirm(null, false)"
        />
      </div>
      <div class="tip flex-x-center">
        或者允许其一定时间内免授权持续操作
      </div>
      <div class="time-list flex-x-center">
        <van-button
          class="time-button"
          text="5分钟内"
          @click="confirm('5')"
        />
        <van-button
          class="time-button"
          text="15分钟内"
          @click="confirm('15')"
        />
        <van-button
          class="time-button"
          text="30分钟内"
          @click="confirm('30')"
        />
      </div>
      <van-popup
        v-model="resultPopup"
        position="bottom"
        style="height:100vh"
        :overlay="false"
      >
        <div class="flex-y-center dialog">
          <van-icon
            :name="res?'checked':'clear'"
            :color="res?'#00D3C4':'#E64340'"
            size="80"
          />
          <div class="dialog-result">
            {{ res?'授权成功':'已拒绝授权' }}
          </div>
          <div v-if="res" style="color: #999">
            授权结果：{{ authTime?authTime+'分钟内':'单次' }}
          </div>
          <van-button
            class="close-btn"
            plain
            @click="close"
          >
            关闭
          </van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {getQueryString} from '@/utils/utils'
import {getUserInfo, scanVerify} from '@/api/auth'
export default {
  data() {
    return {
      empty: true, // 非管理员账号
      appId: '',
      cede: '',
      qrcodeNo: '',
      errorMsg: '', // 报错信息
      userId: '',
      businessId: '',
      bizName: '', // 商户名字
      userName: '', // 用户名字
      authTime: '', // 授权时间
      sceneStr: '', // 操作场景
      resultPopup: false, // 结果弹窗
      res: true, // 授权结果
      description: { // 操作内容描述
        'mchPw': '修改商户账号密码',
        'eAccount':'设置电子账户银行参数',
        'refundPwd':'修改商户退款密码',
        'oem':'修改OEM设置',
        'cMchPw':'重置子商户账号密码',
        'cSpPw':'重置子服务商账号密码',
        'toCMch': '从服务商登入子商户管理后台',
        'spPw':'修改服务商账号密码',
        'openPayMch':'查看聚合支付开发接入数据',
        'refreshPayMch':'重置聚合支付开发接入secretKey',
      },
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 初始化页面数据
    fetchData() {
      this.$toast.show({type: 'loading'})
      this.appId = getQueryString("appid")
      this.code = getQueryString("code")
      this.qrcodeNo = getQueryString("state")
      getUserInfo({
        code: this.code,
        qrcodeNo: this.qrcodeNo
      }).then(res=>{
        if (!res.data) {
          this.empty = true
          this.errorMsg = '当前暂无数据'
        } else {
          this.bizName = res.data.bizName
          this.userName = res.data.userName
          this.sceneStr = res.data.sceneStr
          this.empty = false
        }
        if (res.code !== 0) {
          this.empty = true
          this.errorMsg = res.msg
        }
      }).finally(()=>{
        this.$toast.hide()
      })
    },

    // 确认授权
    confirm(authTime, authResult=true) {
      const data = {
        sceneStr: this.sceneStr,
        qrcodeNo: this.qrcodeNo,
      }
      authTime ? data.authTime = authTime : data.authResult = authResult
      scanVerify(data).then(res => {
        if (res.code !== 0) {
          this.res = false
          this.$toast.message(res.msg)
        }else {
          this.errResult = ''
          this.res = res.data.result
          this.authTime = res.data.time || authTime
        }
      }).finally(() => {
        this.resultPopup = true
      })
    },

    // 关闭授权界面
    close() {
      document.addEventListener("WeixinJSBridgeReady", function () {
        // eslint-disable-next-line no-undef
        WeixinJSBridge.call("closeWindow")
      }, false)
      // eslint-disable-next-line no-undef
      WeixinJSBridge.call("closeWindow")
    }
  }

}
</script>

<style lang="postcss" scoped>
.van-button {
  margin-right: 10px;
  border-radius: 6px;
  font-weight: 400;
}

.login-fail {
  display: flex;
  align-items: center;
  flex-flow: wrap;
  flex-direction: column;
  padding-left: 60px;
  padding-right: 60px;

  & .icon {
    width: 272px;
    height: 272px;
    margin-top: 200px;
  }

  & .msg {
    text-align: center;
    margin-top: 40px;
    font-size: 32px;
    color: #000;
  }
}
.page-main {
  font-size: 28px;
  padding: 30px;
  background-color: #fff;
  height: 100vh;
  & .user-name {
  //color: #00D3C4;
  }
  & .action-description {
  //color: #E64340;
  }
  & .mt5 {
    margin-top: 10px;
  }
  & .btn-List {
    margin-top: 120px;
    & .pra-btn {
      width: 440px;
      background-color: #00D3C4;
      border: 1px solid #00d3c4;
    }
  }
  & .tip {
    margin: 40px 0;
    font-size: 24px;
    color: #999999;
  }
}
.dialog {
  padding-top: 120px;
  & .dialog-result {
    margin: 60px 0 20px;
    font-size: 40px;
  }
  & .close-btn {
    color: #666;
    font-weight: bold;
    margin: 60px 0;
    border: 1px solid #999;
    border-radius: 40px;
    width: 320px;
  }
}
</style>
